<template>
  <a-modal width="60%" :title="type === 3 ? '店铺标签选择' : '商品标签选择'" :visible="value" @ok="submitQuality" @cancel="onCancel">
    <a-spin tip="提交中..." :spinning="isSubQualityLoading">
      <div class="qalityTitle">{{ type === 3 ? '店铺品质标签' : '商品品质标签' }}</div>
      <div style="margin-bottom:20px;">
        <a-row>
          <a-col :span="6" v-for="item in qualityList" :key="item.describe">
            <a-checkbox :value="item.type" :checked="item.status === 1 ? true : false" @change="(e) => onChange(e, item)"> {{ item.describe }} </a-checkbox>
          </a-col>
        </a-row>
      </div>
      <div class="qalityTitle">{{ type === 3 ? '店铺等级标签' : '商品营销活动标签' }}</div>
      <div v-if="type === 2 || type === 1">
        <template v-for="(tag, index) in marketingList">
          <a-tag :key="tag" :closable="true" @close="() => handleClose(tag)">
            {{ tag }}
          </a-tag>
        </template>
        <a-input
          v-if="inputVisible"
          ref="input"
          type="text"
          size="small"
          :style="{ width: '120px' }"
          :value="inputValue"
          @change="handleInputChange"
          @blur="handleInputConfirm"
          @keyup.enter="handleInputConfirm"
          :maxLength="7"
        />
        <a-tag v-else-if="marketingList.length < 30" style="background: #fff; borderStyle: dashed;" @click="showInput"> <a-icon type="plus" /> 新增标签 </a-tag>
      </div>
      <div v-if="type === 3 && gradeList.length > 0">
        <a-row class="flex">
          <div v-for="(item, index) in gradeList" :key="item.type" @click="clickRadio(item, index)" class="radio-div">
            <span :class="['dot-radio', item.status === 1 ? 'active-radio' : '']"></span>
            <label for="">{{ item.describe }}</label>
          </div>
        </a-row>
      </div>
    </a-spin>
  </a-modal>
</template>
<script>
import { kwaiBindingPoi, kwaiQualitysSpu, kwaiPoiMountPoi, kwaiPoiMountPoiUpdate } from '@/service/ksService'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 1 // 1 spu列表提交快手审核 2 poiforspu 新增绑定 3 poi 提交快手审核
    },
    typeThree: {
      type: Number,
      default: 1 // type 为3时 ==>1 提交 2 update
    },
    qualityList: {
      type: Array,
      default: () => []
    },
    marketingList: {
      type: Array,
      default: () => []
    },
    gradeList: {
      type: Array,
      default: () => []
    },
    getProductItemId: {
      type: String | Number,
      default: 0
    },
    postQualityList: {
      type: Array,
      default: () => []
    },
    poiIds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isSubQualityLoading: false,
      inputVisible: false,
      inputValue: ''
    }
  },
  methods: {
    onChange(e = {}, item = {}) {
      const { status = 0, type = 0 } = item
      this.$set(this.qualityList[type - 1], 'status', status === 1 ? 0 : 1)
    },
    clickRadio(item = {}, index = 0) {
      const { status } = item
      const { gradeList = [] } = this
      gradeList.forEach((rows, rowIndex) => {
        if (rowIndex !== index) {
          rows.status = 0
        }
      })
      this.$set(this.gradeList[index], 'status', status === 1 ? 0 : 1)
    },
    // 删除标签
    handleClose(removedTag) {
      const tags = this.marketingList.filter((tag) => tag !== removedTag)
      this.marketingList = tags
    },
    // 新增标签
    showInput() {
      this.inputVisible = true
      this.$nextTick(function() {
        this.$refs.input.focus()
      })
    },
    // 标签确认
    handleInputConfirm() {
      const inputValue = this.inputValue
      const reg = /^[\u4e00-\u9fa5]{0,}$/
      if (!reg.test(inputValue)) {
        this.$messageSend.error('只能输入汉字')
        this.inputValue = ''
        return false
      }
      let tags = this.marketingList
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue]
      }
      Object.assign(this, {
        marketingList: tags,
        inputVisible: false,
        inputValue: ''
      })
    },
    handleInputChange(e = {}) {
      this.inputValue = e.target.value
    },
    submitQuality() {
      this.isSubQualityLoading = true
      const { marketingList = [], qualityList = [], getProductItemId = '', type, poiIds, gradeList = [] } = this || {}
      let postQualityListAgain = []
      // this.postQualityList = []
      if (qualityList.length > 0) {
        qualityList.forEach((item) => {
          if (item.status === 1 && !postQualityListAgain.includes(item.type)) {
            postQualityListAgain.push(item.type)
          }
        })
      }

      if (type === 2 || type === 1) {
        let params = {
          marketingLabels: marketingList,
          qualityLabels: postQualityListAgain,
          productItemId: getProductItemId
        }
        if (type === 2) {
          params = Object.assign(params, { poiIds: poiIds })
        }

        kwaiBindingPoi(params)
          .then((res) => {
            this.$emit('callback')
            this.onCancel()
          })
          .finally(() => {
            this.isSubQualityLoading = false
          })
          .catch(() => {
            this.isSubQualityLoading = false
          })
      }
      if (type === 3) {
        let postGradeLabel = []
        if (gradeList.length > 0) {
          postGradeLabel = gradeList.filter((item) => {
            return item.status === 1
          })
        }
        console.log(postGradeLabel[0])
        const paramsType3 = {
          gradeLabel: postGradeLabel[0] && Object.keys(postGradeLabel[0]).length > 0 ? postGradeLabel[0].type : 0,
          poiId: poiIds.length > 0 ? poiIds[0] : '',
          qualityLabels: postQualityListAgain
        }
        if (this.typeThree === 1) {
          kwaiPoiMountPoi(paramsType3)
            .then((res) => {
              console.log(res)
              this.$emit('callback')
              this.onCancel()
            })
            .finally(() => {
              this.isSubQualityLoading = false
            })
            .catch(() => {
              this.isSubQualityLoading = false
            })
        } else {
          kwaiPoiMountPoiUpdate(paramsType3)
            .then((res) => {
              console.log(res)
              this.$emit('callback')
              this.onCancel()
            })
            .finally(() => {
              this.isSubQualityLoading = false
            })
            .catch(() => {
              this.isSubQualityLoading = false
            })
        }
      }
    },
    onCancel() {
      this.$emit('input', false)
      this.$emit('onCancel')
      this.isSubQualityLoading = false
    },
    // 查询商品品质
    getKwaiQualitysSpu() {
      kwaiQualitysSpu({ productItemId: this.getProductItemId })
        .then((res = {}) => {
          const { qualityLabels = [], marketingLabels = [] } = res
          console.log(res)
          const self = this
          this.$nextTick(() => {
            self.qualityList = qualityLabels
            self.marketingList = marketingLabels || []
            qualityLabels.forEach((item) => {
              if (item.status === 1) {
                self.postQualityList.push(item.type)
              }
            })
            console.log(this)
          })
        })
        .catch(() => {
          return new Error('接口出错')
        })
    }
  }
}
</script>

<style lang="scss">
.ant-checkbox-group {
  width: 100%;
}
.font-weight-bold {
  font-weight: bold;
  display: inline-block;
}
.qalityTitle {
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
}
.flex {
  display: flex;
  .radio-div {
    margin-right: 15px;
    display: flex;
    align-items: center;
  }
}
.dot-radio {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: none;
  border: 1px solid #999;
  display: inline-block;
  cursor: pointer;
  margin-right: 10px;
}
.active-radio {
  border: 2px solid #0090ff;
  position: relative;
}
.active-radio::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0090ff;
  top: 1.5px;
  left: 1.5px;
}
.ant-tag {
  margin-bottom: 3px;
}
</style>
